<template>
  <div class="bussiness">
    <div class="form-wrap">
      <el-form ref="addForm" inline :model="dataForm" class="demo-form-inline">
        <el-form-item label="企业编号">
          <el-input v-model="dataForm.eid" />
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input v-model="dataForm.name" />
        </el-form-item>
        <el-form-item label="创建者">
          <el-input v-model="dataForm.username" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="dataForm.status">
            <el-option label="全部" value="" />
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="getData">搜索</el-button>
          <el-button @click="resetForm">清除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrap">
      <el-button
        type="primary"
        class="add-btn"
        @click="addEvent"
      >+新增企业</el-button>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          align="center"
          prop="index"
          label="序号"
          width="80"
          type="index"
        >
          <template v-slot="{ $index }">
            <div>
              {{ (dataForm.page - 1) * dataForm.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="eid"
          label="企业编号"
          width="260"
        />
        <el-table-column align="center" prop="name" label="企业名称" />
        <el-table-column
          prop="username"
          label="创建者"
          width="260"
          align="center"
        />
        <el-table-column align="center" prop="status" label="状态" width="180">
          <template v-slot="{ row }">
            <div>
              <span v-if="row.status === 1">启用</span>
              <span v-else style="color: red">禁用</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-slot="{ row }"
          align="center"
          label="操作"
          width="200"
        >
          <el-button type="text" @click="editEvent(row)">编辑</el-button>
          <el-button
            v-if="+row.status === 1"
            type="text"
            @click="setStatus(row)"
          >禁用</el-button>
          <el-button
            v-if="+row.status === 0"
            type="text"
            @click="setStatus(row)"
          >启用</el-button>
          <el-button type="text" @click="delEvent(row)">删除</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page.sync="dataForm.page"
        :page-sizes="pagination.pageSizes"
        :page-size.sync="dataForm.limit"
        :layout="pagination.layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <add ref="add" @refresh="getData" />
  </div>
</template>

<script>
import add from './components/add.vue'
export default {
  components: { add },
  data() {
    return {
      value: '',
      tableData: [],
      total: 1,
      dataForm: {
        eid: '',
        name: '',
        username: '',
        status: '',
        page: 1,
        limit: +localStorage.getItem('pageSize') || 10
      },
      option: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await this.$api.enterprise.enterpriseList(this.dataForm)
      this.tableData = res.data.items
      this.total = +res.data.pagination.total
    },
    handleSizeChange(limit) {
      localStorage.setItem('pageSize', limit)
      this.getData()
    },
    handleCurrentChange(page) {
      this.getData()
    },
    resetForm() {
      this.formReset({ exception: ['page', 'limit'] })
      this.getData()
    },
    addEvent() {
      this.$refs.add.isShow = true
    },
    editEvent(row) {
      this.$refs.add.mode = 'edit'
      this.$refs.add.dataForm = row
      this.$refs.add.isShow = true
    },
    async delEvent(row) {
      this.$confirm('确定要删除吗?', '提示')
        .then(async() => {
          await this.$api.enterprise.enterpriseRemovePost({ id: row.id })
          this.getData()
          this.$message.success('删除企业成功')
        })
        .catch(() => {})
    },
    async setStatus(row) {
      await this.$api.enterprise.enterpriseStatusPost({
        id: row.id,
        status: !row.status
      })
      this.$message.success('修改状态成功')
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.bussiness {
  .el-form {
    .el-form-item {
      display: inline-block;
      margin-right: 10px;
      vertical-align: top;
    }
  }

  .table-wrap {
    margin-top: 20px;
    .el-button.add-btn {
      margin-bottom: 15px;
    }
  }

  ::v-deep .el-table {
    border: 1px solid #ccc;
    border-top: none;
    th {
      border-bottom: 1px solid #b3b3b3;
      border-top: 1px solid #b3b3b3;
      background: #f0f0f0;
    }
  }
}
</style>
